<template>
  <div class="new-tab-page large parkinglot-wrapper">
    <ul class="tab">
      <li class="tab-item" :class="{ active: stepNum >= index }" v-for="(item, index) in tabItems" :key="item">
        <div class="step-num">{{ index + 1 }}</div>
        {{ item }}
        <i class="el-icon-d-arrow-right tab-icon" v-if="index !== 2"></i>
      </li>
    </ul>
    <ChooseParkinglot
      v-if="currentTab === '选择要签订协议的停车场'"
      :old-checked-ids="formData.checkedParkIds"
      @setFormData="setFormData"
      @goBackSetp="goBackSetp"
      @goNextStep="goNextStep"
    ></ChooseParkinglot>

    <ChooseMain
      v-if="currentTab === '选择签约主体'"
      :old-merchant-id="formData.merchantId"
      @setFormData="setFormData"
      @goBackSetp="goBackSetp"
      @goNextStep="goNextStep"
    ></ChooseMain>

    <Sign
      v-if="currentTab === '签订协议'"
      :cur-merchant="formData.cur_merchant"
      @setFormData="setFormData"
      @goBackSetp="goBackSetp"
      @submiteForm="submiteForm"
    ></Sign>
  </div>
</template>

<script>
const tabItems = ['选择要签订协议的停车场', '选择签约主体', '签订协议'];
import utils from '@/mixins/utils.js';
import ChooseParkinglot from './chooseParkinglot.vue';
import ChooseMain from './chooseMain.vue';
import Sign from './signTheAgreement.vue';
export default {
  name: 'parkinglot_protocol',
  components: { ChooseParkinglot, ChooseMain, Sign },
  mixins: [utils],
  data() {
    return {
      tabItems,
      currentTab: '选择要签订协议的停车场',
      formData: {
        checkedParkIds: [],
        merchantId: '',
        cur_merchant: null
      }
    };
  },
  methods: {
    setCurrentTab(item) {
      this.currentTab = item;
    },
    setFormData(key, data) {
      this.formData[key] = data;
    },
    goBackSetp() {
      const stepIndex = this.tabItems.indexOf(this.currentTab);
      this.currentTab = this.tabItems[stepIndex - 1];
    },
    goNextStep() {
      const stepIndex = this.tabItems.indexOf(this.currentTab);
      this.currentTab = this.tabItems[stepIndex + 1];
    },
    submiteForm() {
      API.fetchPost('/valueAdded/signAgreement.do', {
        merchantId: this.formData.merchantId,
        parkId: this.formData.checkedParkIds.join(',')
      }).then(res => {
        this.showToast('操作成功', 1, 2000);
        setTimeout(() => {
          this.$router.push({
            name: 'index'
          });
        }, 2000);
      });
    }
  },
  computed: {
    stepNum() {
      let step;
      this.tabItems.some((item, index) => {
        if (item === this.currentTab) {
          step = index;
          return true;
        }
      });
      return step;
    }
  }
};
</script>

<style lang="less" scoped>
@import './index.less';
</style>
